ol
Advanced tools
Package description
The 'ol' npm package, also known as OpenLayers, is a powerful library for displaying map data in web browsers. It provides a comprehensive set of tools for working with maps, including support for various map layers, projections, and interactions. OpenLayers is highly customizable and can be used to create complex mapping applications.
Creating a Map
This code initializes a basic map using OpenStreetMap (OSM) as the tile source. The map is centered at a specific longitude and latitude and is set to a zoom level of 4.
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});Adding Vector Layers
This code adds a vector layer to the map. The vector layer contains a single point feature, which is placed at a specific longitude and latitude.
const vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([37.41, 8.82]))
})
]
})
});
map.addLayer(vectorLayer);Handling Map Interactions
This code adds a select interaction to the map, allowing users to click on features. When a feature is selected, the selected features are logged to the console.
const select = new ol.interaction.Select();
map.addInteraction(select);
select.on('select', function(e) {
console.log('Selected features:', e.selected);
});Leaflet is a popular open-source JavaScript library for mobile-friendly interactive maps. It is lightweight and easy to use, making it a good choice for simple mapping applications. Compared to OpenLayers, Leaflet has a smaller feature set but is often preferred for its simplicity and ease of use.
Mapbox GL JS is a powerful library for rendering interactive maps using WebGL. It offers high performance and a wide range of features, including support for custom vector tiles and 3D terrain. Compared to OpenLayers, Mapbox GL JS provides more advanced rendering capabilities but may require a Mapbox account for certain features.
Cesium is a JavaScript library for creating 3D globes and maps. It is designed for high-performance visualization of large datasets and supports a wide range of data formats. Compared to OpenLayers, Cesium is more focused on 3D visualization and is often used for applications that require a 3D perspective.
Readme
OpenLayers is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the BSD 2-Clause License.
Install the ol package:
npm install ol
Import just what you need for your application:
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
See the following examples for more detail on bundling OpenLayers with your application:
OpenLayers appreciates contributions of all kinds. We especially want to thank our fiscal sponsors who contribute to ongoing project maintenance.
Pozi helps connect communities through spatial thinking. We love Openlayers and it forms a core part of our platform. https://pozi.com/ https://app.pozi.com/
yey'maps is a scalable cloud GIS suite that is developed with the powerful Openlayers API and the GDAL library. https://www.yeymaps.io/
Your one-stop-shop for geospatial open source software. https://www.geosolutionsgroup.com/
We develop leading Physical Security Information Management (PSIM) software. OpenLayers is the core of our map engine and we love it! https://elacompil.recruitee.com/
See our GitHub sponsors page or Open Collective if you too are interested in becoming a regular sponsor.
The ol package contains a src/ folder with the sources, authored as ES Modules. To use these untranspiled sources, either import modules from ol/src instead of ol, or configure your bundler with an alias pointing to ol/src for the ol package.
The ol package includes auto-generated TypeScript declarations as *.d.ts files.
OpenLayers runs on all modern browsers that support HTML5 and ECMAScript 5. This includes Chrome, Firefox, Safari and Edge.
For older browsers and platforms (Internet Explorer, Android 4.x, iOS v12 and older, Safari v12 and older), polyfills may be needed for the following browser features:
fetch: Available from polyfill.io.requestAnimationFrame: Available from polyfill.io.element.prototype.classList (add/remove): Available from polyfill.io.URL API: Available from polyfill.io or core-js.TextDecoder: Available from polyfill.io.Number.isInteger: Available from polyfill.io or core-js.Reflect: Available from core-js.ol/source/GeoTIFF requires a browser that supports ECMAScript 6. Additionally a polyfill for Promise.allSettled may be needed.
Check out the hosted examples, the workshop or the API documentation.
Please use the GitHub issue tracker for all bugs and feature requests. Before creating a new issue, do a quick search to see if the problem has been reported already.
Please see our guide on contributing if you're interested in getting involved.
FAQs
OpenLayers mapping library
We found that ol demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.